<script setup>
import { ref,onMounted } from 'vue'
import E from 'wangeditor'
const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
import {zyOffice} from '/public/zyoffice/js/w'
import '/public/zyoffice/css/w.css'
import '/public/layer-v3.1.1/layer/layer'
import '/public/layer-v3.1.1/layer/theme/default/layer.css'

//zyoffice Button
class zyofficeBtn extends BtnMenu {
    constructor(editor) {
        const $elem = E.$(
            `<div class="w-e-menu" data-title="导入Word(docx格式)">
                <img src="/public/zyoffice/w.png"/>
            </div>`
        )
        super($elem, editor)
    }
    clickHandler() {
        zyOffice.getInstance().SetEditor(this.editor);
        zyOffice.getInstance().api.openDoc();
    }
    tryChangeActive() {this.active()}
}
const msg="zyoffice-vue3-cli-wangEditor"

 onMounted(()=>{
    zyOffice.getInstance({
        api:"http://localhost:13710/zyoffice/word/convert",
        ui:{render:"wdpst"}
    });//加载控件

    // 注册菜单
    E.registerMenu("zyofficeBtn", zyofficeBtn)

    const editor = new E("#editor")
    editor.create()
    //
    const edt2 = new E("#editor2")
    edt2.create()
 })


</script>

<template>
  <h1>{{ msg }}</h1>
  <div id="editor"></div><br/>
  <p>第二个编辑器</p>
  <div id="editor2"></div>
  <div id="wdpst"></div>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>
